

<template>
    <div class="mask" @touchmove="changeMove" @scroll="scroll">
		<div class="search-leader">
            <i class="icon-search" @click='searchSubmit'></i>
            <input placeholder="搜索" v-model="searchValue"  type="text" class="search-input">
            <span class="color-search" @click="close">取消</span>
        </div>
        <!-- <div class="leader-info" v-for="info in List">
			<div class="pic">
				<img :src="srcImg" alt="" />
			</div>
			<div class="info-container">	
				<div class="basic-info ellipsis">
					<h2 >{{info.name}}</h2>
					<span class="sex" >{{info.sex_descr}} {{info.birthdate | handleBirth}} ({{age}})</span>
				</div>
				<div class="posi-info ellipsis">
					<span>{{info.position_desc}}</span>
				</div>
			</div>
		</div> -->
    </div>
</template>
<script>
import Vue from "vue";
import { Spinner } from "mint-ui";
import dropDown from "./dropOption";
Vue.component(Spinner.name, Spinner);
export default {
  data() {
    return {
      searchValue: "",
      List: [
        {
          label: "全部",
          unit: "yes"
        },
        {
          label: "招商局集团办公厅",
          unit: "A"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "B"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "C"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "yes"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "D"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "E"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "F"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "G"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "G"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "G"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "G"
        }
      ],
      checked: 0,
      scrollTop: 0,
      showSearch: false
    };
  },

  watch: {
    showMask: function(newVal) {
      if (newVal) {
        var self = this;
        Vue.nextTick(function() {
          self.$refs.optCont.scrollTop = self.scrollTop;
        });
      }
    }
  },
  components: {
    dropDown
  },
  methods: {
    searchSubmit() {
        Bus.$emit("searchValue",this.searchValue)
        this.showSearch = false;
        Bus.$emit("showSearch",this.showSearch)

    },
    changeMove: function(e) {
      e.stopPropagation();
    },
    scroll: function() {
    },
    handleClick: function(index, val, label) {
      var self = this;
      self.checked = index;
      setTimeout(function() {
        self.$emit("update:showMask", false);
        self.$emit("returnChecked", val, label);
      }, 100);
      self.scrollTop = self.$refs.optCont.scrollTop;
    },
    close() {
        this.showSearch = false
        Bus.$emit('showSearch',this.showSearch)
    }
  }
};
</script>
<style scoped>
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 1);
  z-index: 1000;
}
.leader-info .info-container .basic-info > h2 {
  display: inline-block;
  font-size: 0.36rem;
}
.leader-info .info-container .basic-info .sex {
  color: #888;
}
.leader-info .info-container .basic-info {
  margin-top: 0.02rem;
  margin-bottom: 0.2rem;
}
.leader-info .info-container .posi-info {
  font-size: 0.32rem;
}
.leader-info .ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.leader-info {
  padding-left: 0.3rem;
  padding-top: 0.24rem;
}
.leader-info > div {
  display: inline-block;
}
.leader-info .info-container {
  padding-left: 0.1rem;
  max-width: 6rem;
}
.search-input {
  width: 70%;
  border: none;
  margin-left: 0.2rem;
  background-color: transparent;
}
.search-input:focus {
  outline: none;
  border-color: #9ecaed;
  box-shadow: 0 0 10px #9ecaed;
}
.search-input::-webkit-input-placeholder {
  color: #888;
  font-size: 0.32rem;
}
.mask .search-leader {
  font-size: 0.32rem;
  line-height: 3;
  border-bottom: 1px solid #ccc;
}
.color-search,
.icon-search:before {
  color: #26a2ff;
}

.icon-search,
.color-search {
  margin-left: 0.4rem;
}
</style>

             
             
             
             
